<template>
  <div class='list bc-white'>
    <ul>
      <li v-for="(item,index) in formatListData" :key="index" @click="showDetail(item,index)">
        <div class="show">
          <div :class="{logo:true,other:true,yellow:item.category=='自创',blue:item.category=='国创',green:item.category=='挑战杯',red:item.category=='其他','light-green':item.category=='节能减排'}">
            <span>{{item.category}}</span>
          </div>
          <div class="right-content">
            <p class="title white-space">{{item.title}}</p>
            <p class="white-space"><span>开始时间：{{item.time}}</span><span class="end-time">结束时间：{{item.endtime||"暂无"}}</span></p>
            <Detail class="more-info" :info="item" />
          </div>
        </div>
        <p class="arrow"><img :src="item.isShow?arrow_top:arrow_bottom" alt=""></p>
      </li>
    </ul>
    <p class="no-data" v-if="formatListData.length===0">暂时没有数据哦~</p>
  </div>
</template>
<script>
import Detail from './detail.vue'
export default {
  props:['listData','routerDetail'],
  components: {Detail},
  name: "",
  data() {
    return {
      arrow_top:require('../../../../../assets/images/home/arrow-top.png'),
      arrow_bottom:require('../../../../../assets/images/home/arrow-bottom.png'),
    };
  },
  computed:{
    formatListData(){
      return this.listData||[]
    }
  },
  methods: {
    showDetail(item,index){
      this.$set(item,'isShow',!item.isShow)
      item.isShow?$('.more-info').eq(index).slideDown():$('.more-info').eq(index).slideUp()
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../../jobServe/workstudy/model/list.scss";
.list {
  li{
    padding: 0;
    padding-bottom: 10px;
  }
  .show{
    padding: 20px;
    padding-bottom: 0;
    display: flex;

    .logo{
      padding-right: 10px;
      margin-right: 20px;
      font-size: 18px;
      border-right: 3px solid;
      box-sizing: border-box;
      max-width: 50px;
      overflow-wrap: break-word;
      
      >span{
        line-height: 50px;
      }
    }
    @import "../../common/color.scss";
    .right-content{
      font-size: 13px;
      flex: 1;
      overflow-wrap: break-word;
      max-width: calc(100% - 50px);

      .end-time{
        margin-left: auto;
        float: right;
      }
    }
  }
}
</style>